<template>
  <div>
    <div class="reg-item" :key="item.id" v-for="(item, index) in config.list">
      <el-form-item label="名称" style="margin-bottom: 8px">
        <el-input v-model="item.name"></el-input>
      </el-form-item>

      <el-divider>选项</el-divider>
      <div style="text-align: center; margin-bottom: 16px">
        <el-radio-group v-model="item.mode" size="mini" @change="handleDataTypeChange(item)">
          <el-radio-button label="0">接口</el-radio-button>
          <el-radio-button label="1">数据源</el-radio-button>
        </el-radio-group>
      </div>

      <el-form-item v-if="item.mode == 0" label="接口">
        <l-layer-select
          v-model="item.dataCode"
          labelKey="f_Name"
          valueKey="f_Id"
          :columns="apiColumns"
          @change="handleApiChange(item, $event)"
          :loadPageData="loadPageData"
        ></l-layer-select>
      </el-form-item>

      <el-form-item v-if="item.mode == 1" label="数据源" style="margin-bottom: 8px">
        <l-select
          v-model="item.dataCode"
          placeholder="请选择数据源"
          size="mini"
          :options="lr_dataSource"
          labelKey="f_Name"
          valueKey="f_Code"
          filterable
          @change="handleDataSourceChange(item)"
        >
        </l-select>
      </el-form-item>
      <el-form-item label="显示值" style="margin-bottom: 8px">
        <l-select
          v-model="item.dataValueKey"
          placeholder="请选择值"
          size="mini"
          :options="myColNameList(item)"
          filterable
        >
        </l-select>
      </el-form-item>

      <el-form-item label="跳转功能" style="margin-bottom: 0">
        <l-tree-select :options="appTree" v-model="item.moduleId"> </l-tree-select>
      </el-form-item>
      <el-button
        title="删除"
        v-if="config.list.length > 1"
        @click="handleRemoveCol(index)"
        class="reg-item-delete"
        circle
        plain
        size="mini"
        type="danger"
      >
        <i class="el-icon-close"></i>
      </el-button>
    </div>
    <div class="mt-8" v-if="config.list.length < 4">
      <el-button type="primary" size="mini" @click="handleAddCol">添加数据项</el-button>
    </div>
  </div>
</template>
<script>
export default {
  props: ["data"],
  inject: ["appDesign"],
  data() {
    return {
      apiColumns: [
        { label: "数据名称", prop: "f_Name", minWidth: "110" },
        { label: "数据连接", prop: "f_Url", minWidth: "110" },
      ],
      apiNameList: [],
    };
  },
  computed: {
    config() {
      return this.data;
    },
    appTree() {
      return this.appDesign.appTree || [];
    },
  },
  created() {
    /*if(this.config.dataCode){
            this.lr_loadDataSourceColNames(this.config.dataCode)
        }*/
  },
  methods: {
    init() {},
    myColNameList(row) {
      if (row.mode == 0) {
        if (row.apiResponseType) {
          return this.lr_turnPropertysInfo(JSON.parse(row.apiResponseType)).map((item) => ({
            label: item,
            value: item,
          }));
        }
      } else {
        if (this.lr_dataSourceCol && row.dataCode) {
          const colNameList = this.lr_dataSourceCol[row.dataCode] || [];
          return colNameList.map((t) => {
            return { value: t, label: t };
          });
        }
      }

      return [];
    },
    handleDataSourceChange(item) {
      const code = item.dataCode;
      if (!this.$validatenull(code)) {
        this.lr_loadDataSourceData(code);
        this.lr_loadDataSourceColNames(code);
      }

      item.dataValueKey = "";
    },
    handleAddCol() {
      const len = this.config.list.length;
      if (len >= 4) {
        this.$message({
          type: "warning",
          message: "最多添加4项",
        });
      } else {
        this.config.list.push({
          id: this.$uuid(),
          moduleId: "",
          name: `数据项${len}`,
          mode: 0,
          dataCode: "",
          dataValueKey: "",
        });
      }
    },
    handleRemoveCol(index) {
      if (this.config.list.length == 1) {
        this.$message({
          type: "warning",
          message: "必须保留一项",
        });
      } else {
        this.config.list.splice(index, 1);
      }
    },
    handleApiChange(item, row) {
      item.dataCode = row.f_Name;
      item.apiCode = row.f_Id;
      item.apiUrl = row.f_Url;
      item.apiResponseType = row.f_ResponseType;
    },
    loadPageData(pageData) {
      return new Promise((resovle) => {
        this.lr_apiListData(pageData).then((res) => {
          resovle(res);
        });
      });
    },
    handleDataTypeChange(row) {
      row.dataCode = "";
      row.apiCode = "";
    },
  },
};
</script>
